<template>
  <!-- 米轨仪表盘 -->
  <div
    ref="chartEl"
    :style="stylesConfig"
    v-resize="resizeHandler"
    class="compo-public-style"
  ></div>
</template>

<script setup>
import { computed } from 'vue';

import { useChartComponentData } from '@/hooks/use-chart-component-data';

const props = defineProps({
  value: {
    type: Object,
    default: () => {}
  },
  preview: {
    type: Boolean,
    default: () => false
  }
});

// 样式配置
const stylesConfig = computed(() => {
  return {
    width: `${styles.value?.w / 100}rem`,
    height: `${styles.value?.h / 100}rem`,
    position: preview.value ? 'absolute' : 'static',
    left: `${styles.value?.x}px`,
    top: `${styles.value?.y}px`,
    borderRadius: `${styles.value.leftTop / 100}rem ${
      styles.value.rightTop / 100
    }rem ${styles.value.rightBottom / 100}rem ${
      styles.value.leftBottom / 100
    }rem`
  };
});

const mockData = {
  legend: {
    show: true //是否展示图例
  },

  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      // center: ['50%', '50%'],
      // min: 0,
      // max: 100,
      splitNumber: 5, //分几份

      // pointer: {
      //   itemStyle: {
      //     color: '#999'
      //   }
      // },
      axisLine: {
        lineStyle: {
          width: 10,
          color: [
            [0.3, '#f4664a'],
            [0.7, '#faad14'],
            [1, '#30bf78']
          ]
        }
      },
      axisTick: {
        //设置间距
        distance: -25,
        length: 25,
        lineStyle: {
          color: '#fff',
          width: 3
        }
      },
      // splitLine: {
      //   //刻度线
      //   distance: 2,
      //   length: 5,
      //   lineStyle: {
      //     color: '#999',
      //     width: 1
      //   }
      // },
      // axisLabel: {
      //   color: '#999',
      //   distance: 30,
      //   fontSize: 12
      // },
      detail: {
        valueAnimation: true,
        color: 'inherit',
        fontSize: 12
      },
      // // 指针样式
      // anchor: {
      //   show: true,
      //   showAbove: true,
      //   size: 12,
      //   offsetCenter: [0, 0],
      //   itemStyle: {
      //     borderWidth: 2,
      //     borderColor: '#999'
      //   }
      // },
      data: [
        {
          name: 'SCORE',
          value: 50
        }
      ]
    }
  ]
};
//图形类型配置
const chartTypeConfig = {
  type: 'gauge',
  childType: 'widget-meter-gauge'
};
const { styles, preview, chartEl, resizeHandler } = useChartComponentData(
  props,
  mockData,
  chartTypeConfig
);
</script>

<style scoped lang="scss"></style>
